Soy bastante nuevo en Rails y en la programación en general, y tengo problemas para pasar datos de un <%= content_tag %> en una vista de Rails a una función Javascript (en este caso, usando específicamente fullcalendar ). La inspección de la fuente HTML de la página representada muestra que los datos terminan correctamente en el div resultante, pero los datos no parecen llegar a la función de Javascript que se supone que hace referencia a ellos.
El problema es probablemente algo muy básico ya que no tengo experiencia previa con Javascript, pero una gran cantidad de búsquedas en Google no me han mostrado ninguna solución.
La vista contiene la siguiente content_tag de contenido:
<%= content_tag :div, "", class: "calendar_data", data: {start_date: '2021-10-12', end_date: '2021-10-19'} do %> <% end %>(Una vez que esto funcione, reemplazaré esas fechas con variables).
La sección correspondiente de mi application.js incluye el siguiente código:
function loadCalendar() { var calendarEl = document.getElementById('calendar'); var calendar = new Calendar(calendarEl, { plugins: [timeGridPlugin], initialView: 'timeGrid', visibleRange: { start: $('.calendar_data').data('start_date'), end: $('.calendar_data').data('end_date') } }); calendar.render(); }; Reemplazar los bits $('.calendar_data').data('start_date') y end_date con fechas simples como cadenas (por ejemplo '2021-10-12' ) produce el comportamiento esperado, por lo que parece que lo que está pasando es que esos $. ... los bits no devuelven los datos que se supone que deben buscar. Según tengo entendido, esos datos deberían estar disponibles, dado que el HTML de la página renderizada contiene un div con el contenido esperado:
<div class="calendar_data" data-start-date="2021-10-12" data-end-date="2021-10-19"> </div> (Para completar, sí, instalé jquery y application.js incluye import $ from 'jquery' ).
¿Qué estoy haciendo mal aquí? ¿Qué principio básico de este proceso no he podido buscar correctamente en Google?
He solucionado esto haciendo que calendar_data sea una identificación en lugar de una clase en content_tag y aprovechando la funcionalidad de conjunto de dataset y getElementById de Javascript:
El código application.js resultante es este:
function loadCalendar() { var calendarEl = document.getElementById('calendar'); var calendarData = document.getElementById('calendar_data'); var calendar = new Calendar(calendarEl, { plugins: [timeGridPlugin], initialView: 'timeGrid', visibleRange: { start: calendarData.dataset.startDate, end: calendarData.dataset.endDate } }); calendar.render(); };